<template>
  <div class="app-container">
    <h3
      style="margin-top: 12px; font-family: 'Microsoft YaHei'; color: #409ef4"
    >
      基本信息
    </h3>
    <el-card shadow="hover">
      <el-descriptions :column="4" border>
        <el-descriptions-item label="模型编号">{{
          (modelDetail && modelDetail.modelNo) || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="模型明细编号">{{
          (modelPlot && modelPlot.modelNo) || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="建模数据编号">{{
          (modelDetail && modelDetail.constructNo) || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="成分名称">{{
          (modelDetail && modelDetail.constituentName) || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="仪器编号">{{
          (modelDetail && modelDetail.instrumentNo) || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="仪器名称">{{
          (modelDetail && modelDetail.instrumentName) || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="建模人">{{
          (modelDetail && modelDetail.trainerName) || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="采样时间">{{
          (modelDetail && modelDetail.samplingTime) || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="部门名称">{{
          (modelDetail && modelDetail.departmentName) || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="交叉验证比例">{{
          (modelDetail && modelDetail.cvRatioName) || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="预处理方法">{{
          (modelDetail && modelDetail.preMethodName) || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="波长选择方法">{{
          (modelDetail && modelDetail.waveSelectMethodName) || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="潜在变量数">{{
          (modelDetail && modelDetail.maxPotential) || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="Rc²">{{
          (modelDetail && modelDetail.rc2) || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="RMSECV">{{
          (modelDetail && modelDetail.rmsecv) || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="Rp²">{{
          (modelDetail && modelDetail.rp2) || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="RMSEP">{{
          (modelDetail && modelDetail.rmsep) || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="RPD">{{
          (modelDetail && modelDetail.rpd) || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="t检验">{{
          (modelDetail && modelDetail.tTest) || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="模型状态">
          <el-tag type="success">已完成</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <h3
      style="margin-top: 12px; font-family: 'Microsoft YaHei'; color: #409ef4"
    >
      数据可视化
    </h3>
    <el-card shadow="always" style="padding: 20px">
      <el-row :gutter="20">
        <el-col :span="12">
          <scree-plot-chart
            v-if="screePlotData.x && screePlotData.bar && screePlotData.line"
            title="碎石图（Scree plot）"
            :scree-x="screePlotData.x"
            :scree-bar="screePlotData.bar"
            :scree-plot="screePlotData.line"
          />
          <div v-else class="empty-chart-placeholder">
            <div class="chart-title">碎石图</div>
            <div class="placeholder-content">
              <i class="el-icon-info"></i>
              <p>暂无数据</p>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <stacked-line-chart
            v-if="loadingPlotData.xAxis && loadingPlotData.series"
            title="负载图（Load plot）"
            :xAxisData="loadingPlotData.xAxis"
            :seriesData="loadingPlotData.series"
          />
          <div v-else class="empty-chart-placeholder">
            <div class="chart-title">负载图</div>
            <div class="placeholder-content">
              <i class="el-icon-info"></i>
              <p>暂无数据</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card shadow="always" style="padding: 20px; margin-top: 20px">
      <el-row :gutter="20">
        <el-col :span="12">

          <pca-scatter-chart
            ref="scoreChart"
            v-if="scorePlotData.pc1 && scorePlotData.pc2"
            title="得分图（Score plot）"
            :scoreScatterPc1="scorePlotData.pc1"
            :scoreScatterPc2="scorePlotData.pc2"
            :pc1Value="scorePlotData.pc1Value"
            :pc2Value="scorePlotData.pc2Value"
            :ellipseAngle="scorePlotData.ellipseAngle"
            :ellipseWidth="scorePlotData.ellipseWidth"
            :ellipseHeight="scorePlotData.ellipseHeight"
          />
          <div v-else class="empty-chart-placeholder">
            <div class="chart-title">得分图</div>
            <div class="placeholder-content">
              <i class="el-icon-info"></i>
              <p>暂无数据</p>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <stacked-line-chart
            title="相关性图（Collection plot）"
            :xAxisData="xAxisData2"
            :seriesData="seriesData2"
          />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
import StackedLineChart from "@/views/tool/build/ChartComponent.vue";
import PcaScatterChart from "@/components/PcaScatterChart.vue";
import ScreePlotChart from "@/components/ScreePlotChart.vue";
import { getData } from "@/api/model/data";
import { getModelDetail } from "@/api/model/modelDetail";

export default {
  name: "ModelDetail",
  components: { StackedLineChart, PcaScatterChart, ScreePlotChart },
  data() {
    return {
      modelId: null,
      modelDetail: {},
      modelPlot: {},
      // 图表数据
      screePlotData: {},
      loadingPlotData: {},
      scorePlotData: {},
      modelDetailList: [],
      modelDetailList2: [],
      xAxisData1: [],
      xAxisData2: [],
      xAxisData3: [],
      xAxisData4: [],
      seriesData1: [],
      seriesData2: [],
      seriesData3: [],
      seriesData4: [],
      loading: false,
      preProcessing: false,
      preProcessing2: false,
      preProcessing3: false,
    };
  },
  mounted() {
    console.log("查看建模数据详情的参数", this.$route.query);
    const modelId = this.$route.query.modelId;
    if (modelId) {
      // 使用 Promise.all 并行执行两个请求，确保都完成后再解析数据
      Promise.all([getData(modelId), getModelDetail(modelId)])
        .then(([modelDataRes, modelDetailRes]) => {
          this.modelDetail = modelDataRes.data || {};
          this.modelPlot = modelDetailRes.data || [];
          console.log("查看建模数据的基本信息", this.modelDetail);
          console.log("查看建模数据详情", this.modelPlot);

          // 确保所有数据都获取完成后再解析图表数据
          this.parseChartData();
        })
        .catch((err) => {
          console.error("获取模型详情失败:", err);
          this.modelDetail = {};
          this.modelPlot = [];
        });
    } else {
      console.error("未提供模型ID");
      this.modelDetail = {};
      this.modelPlot = [];
    }
  },
  methods: {
    parseChartData() {
      try {
        // 解析碎石图数据
        if (this.modelPlot.screePlot) {
          this.screePlotData = JSON.parse(this.modelPlot.screePlot);
        }

        // 解析负载图数据
        if (this.modelPlot.loadingPlot) {
          this.loadingPlotData = JSON.parse(this.modelPlot.loadingPlot);
        }

        // 解析得分图数据
        if (this.modelPlot.scorePlot) {
          this.scorePlotData = JSON.parse(this.modelPlot.scorePlot);
        }
        console.log("查看建模数据详情", this.scorePlotData);
      } catch (error) {
        console.error("解析图表数据失败:", error);
      }
    },
    drawChart(container, title) {
      const chart = echarts.init(container);
      const option = {
        title: {
          text: title,
          left: "center",
          top: 10,
          textStyle: { fontSize: 14 },
        },
        tooltip: {},
        xAxis: {
          type: "category",
          data: [
            "09:43:00",
            "09:43:10",
            "09:43:20",
            "09:43:30",
            "09:43:40",
            "09:43:50",
            "09:44:00",
          ],
        },
        yAxis: { type: "value" },
        series: [
          {
            data: [7.6, 7.5, 7.7, 7.8, 7.9, 8.0, 8.3],
            type: "line",
            smooth: true,
            symbol: "circle",
          },
        ],
      };
      chart.setOption(option);
    },
  },
};
</script>

<style scoped>
.chart-container {
  height: 300px;
  background: #fff;
  padding: 10px;
  border: 1px solid #eee;
}

.empty-chart-placeholder {
  width: 100%;
  height: 300px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  background-color: #fafafa;
}

.empty-chart-placeholder .chart-title {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  padding: 10px;
  color: #333;
  border-bottom: 1px solid #ebeef5;
  background-color: #fff;
}

.empty-chart-placeholder .placeholder-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #909399;
}

.empty-chart-placeholder .placeholder-content i {
  font-size: 48px;
  margin-bottom: 16px;
  color: #c0c4cc;
}

.empty-chart-placeholder .placeholder-content p {
  margin: 0;
  font-size: 14px;
}
</style>
